<template>
  <div id="test">
    <p>test</p>
    <div v-for="(item,index) in list" :key="index">
      <label :for="item.name">{{item.name}}</label>
      <!-- <input :id="item.name" v-model="item.value" /> -->
      <!-- <input :id="item.name" @change="update($event, item)" /> -->
      <el-input v-model="item.value" placeholder="请输入内容"></el-input>
    </div>
  </div>
</template>
<script>
export default {
  name: "test",
  components: {},
  data() {
    return {
      list: [{ name: "data1" }, { name: "data2" }]
    };
  },
  methods: {
    // update: function(e, item) {
    //   console.log("$event.target.value", e.target.value);
    //   console.log("item", item);
    // }
    // update(e, item) {
    //   console.log("$event.target.value", e.target.value);
    //   console.log("item", item);
    // }
  },
  watch: {
    list: {
      deep: true,
      handler: function() {
        console.log("this.list", this.list);
      }
    }
  }
};
</script>
<style scoped>
</style>